<template>
  <a-modal
    :title="form && form.id ? '修改申请' : '新建申请'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="entry_time" label="入职时间" prop="entry_time">
          <a-date-picker class="full" :disabled="disabled"  v-model="form.entry_time" placeholder="请选择入职时间"/>
        </a-form-model-item>
        <a-form-model-item ref="old_dept" label="原组织" prop="old_dept">
          <a-tree-select
            :disabled="disabled"
            placeholder="请选择原组织"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
            v-model="form.old_dept"
            :tree-data="treeData"
            tree-default-expand-all
          />
        </a-form-model-item>
        <a-form-model-item ref="old_post" label="原岗位" prop="old_post">
          <a-select :disabled="disabled" placeholder="请选择原岗位" v-model="form.old_post">
            <template v-for="item in deptList">
              <a-select-option :value="item.id" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="dept" label="转入组织" prop="dept">
          <a-tree-select
            :disabled="disabled"
            placeholder="请选择转入组织"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
            v-model="form.dept"
            :tree-data="treeData"
            tree-default-expand-all
          />
        </a-form-model-item>
        <a-form-model-item ref="post" label="岗位" prop="post">
          <a-select :disabled="disabled" placeholder="请选择转入岗位" v-model="form.post">
            <template v-for="item in deptList">
              <a-select-option :value="item.id" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="refuseReason" label="拒绝原因" prop="refuseReason" v-if="form.approval_status === '2'">
          <a-textarea :rows="6"  :disabled="disabled"  v-model="form.refuseReason"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="modal-footer" slot="footer">
      <a-button @click="() => { $emit('cancel') }">
        取消
      </a-button>
      <template v-if="(!form.order_status || form.order_status === '1' || form.order_status === '3') && !disabled">
        <a-button ghost type="danger" @click="handleOk('1')">
          暂存
        </a-button>
        <a-button type="primary" @click="handleOk('2')">
          提交
        </a-button>
      </template>
    </div>
  </a-modal>
</template>

<script>
import { getList as getDept } from '@/api/dept'
import { getList as getPost } from '@/api/post'
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      deptList: [],
      form: {
        id: undefined,
        entry_time: undefined,
        old_dept: undefined,
        old_post: undefined,
        dept: undefined,
        post: undefined,
        order_status: undefined,
        refuseReason: undefined,
      },
      disabled: false,
      rules: {
        entry_time: [
          { required: true, message: '请选择入职时间', trigger: 'change' },
        ],
        dept: [
          { required: true, message: '请选择转让组织', trigger: 'change' },
        ],
        post: [
          { required: true, message: '请选择转让岗位', trigger: 'change' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
      this.form.dept = this.form.dept ? parseInt(this.form.dept) : undefined;
      this.form.old_dept = this.form.old_dept ? parseInt(this.form.old_dept) : undefined;
      this.form.post = this.form.post ? parseInt(this.form.post) : undefined;
      this.form.old_post = this.form.old_post ? parseInt(this.form.old_post) : undefined;
    })
    this.$watch('visible', (e) => {
      if (e) {
        this.getDeptList()
        this.getPostList()
      }
    })
  },
  methods: {
    getDeptList() {
      getDept().then(ret => {
        this.treeData = ret.data
      })
    },
    getPostList() {
      getPost().then(ret => {
        this.deptList = ret.data.result
      })
    },
    handleOk(tag) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.order_status = tag;
          this.form.dept = this.form.dept ? this.form.dept.toString() : '';
          this.form.post = this.form.post ? this.form.post.toString() : '';
          this.form.old_dept = this.form.old_dept ? this.form.old_dept.toString() : '';
          this.form.old_post = this.form.old_post ? this.form.old_post.toString() : '';
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        entry_time: undefined,
        old_dept: undefined,
        old_post: undefined,
        dept: undefined,
        post: undefined,
        order_status: undefined,
        refuseReason: undefined,
      };
    },
  }
}
</script>
